<!DOCTYPE html>
<html lang="zh">
<head>
    <title>CodeMirror Test</title>
    <meta charset="UTF-8">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" href="../examples/css/style.css"/>
</head>
<body>
<div id="layout">
    <textarea id="test" style="display:none;">###Hello world!</textarea>
</div>
<script src="../examples/js/jquery.min.js"></script>
<link rel="stylesheet" href="../lib/codemirror/lib/codemirror.min.css"/>
<script src="../lib/codemirror/lib/codemirror.min.js"></script>
<script src="../lib/codemirror/addons.min.js"></script>
<script src="../lib/codemirror/modes.min.js"></script>
<!-- <script src="../lib/codemirror-5.0/addon/edit/closetag.js"></script>
 <script src="../lib/codemirror-5.0/addon/fold/xml-fold.js"></script>
 <script src="../lib/codemirror-5.0/mode/xml/xml.js"></script>
 <script src="../lib/codemirror-5.0/mode/javascript/javascript.js"></script>
 <script src="../lib/codemirror-5.0/mode/css/css.js"></script>
 <script src="../lib/codemirror-5.0/mode/htmlmixed/htmlmixed.js"></script>-->
<!--<script src="../lib/codemirror/addons.min.js"></script>
<script src="../lib/codemirror/modes.min.js"></script>

<link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css">
<link rel="stylesheet" href="../lib/codemirror/addon/search/matchesonscrollbar.css">

<script src="../lib/codemirror/addon/dialog/dialog.js"></script>
<script src="../lib/codemirror/addon/search/searchcursor.js"></script>
<script src="../lib/codemirror/addon/search/search.js"></script>
<script src="../lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="../lib/codemirror/addon/search/matchesonscrollbar.js"></script>-->
<style>
    html, body, #layout, .CodeMirror {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
<script type="text/javascript">
    $(function () {

        var codeMirrorConfig = {
            mode: "gfm",
            theme: "default",
            //tabSize: 4,
            //dragDrop: false,
            autoCloseTags: true,
            //autofocus: true,
            //indentUnit : 4,
            //lineNumbers: true,
            //lineWrapping: true,
            /*matchBrackets: true,
            indentWithTabs: true,
            styleActiveLine: true,
            styleSelectedText: true,
            autoCloseBrackets: true,
            showTrailingSpace: true,
            highlightSelectionMatches: {
                showToken: /\w/
            } */
        };

        $.get("../examples/test.md", function (md) {
            $("#test").html(md);
            var codeMirrorEditor = CodeMirror.fromTextArea($("#test")[0], codeMirrorConfig);
            var codeMirror = $(".CodeMirror");
        });
    });
</script>
</body>
</html>